<template>
	<view class="home-nav">
		<view class="home-nav__group">
			<view v-for="(item, index) in group" :key="index" class="home-nav__block" @click="onClick(item)">
				<!-- <view class="home-nav__title">{{ item.style }}</view> -->
				<view class="block-card">
					<view class="block-card-icon">
						<image :src="`${imageUrl(item.filePath)}`" mode="aspectFill" class="block-image"></image>
						<view class="block-card-title">
							{{ item.style }}
						</view>
						<view class="block-card-text">
							{{ item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let host = getApp().globalData.apiurl;
	export default {
		name: "style-group",
		props: {
			group: {
				type: Array,
				default: function() {
					return null;
				},
			},
		},
		data(){
			return{
			}
		},
		mounted() {
		},
		methods: {
			onClick(event) {

				let title = event.title;
				let background = event.background;
				let path = event.path;
				const url = `/pages/design/template?path=${path}&title=${title}&background=${background}/`;
				uni.$emit("sendKind", 123)

				if (getCurrentPages().length > 9) {

					uni.redirectTo({
						url,
					});
				} else {
					uni.navigateTo({
						url,
					});
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	@import "@/common/style/icon.css";

	.card-icon-content {
		color: #1874ca;
		font-size: 78rpx;
	}

	.home-nav__title {
		margin: 0 32rpx;
		color: rgba(216, 230, 235, 0.6);
		font-size: 14px;
	}

	.home-nav__group {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;
		justify-content: center;
	}

	.home-nav__block {
		width: 300rpx;
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.block-card {
			width: 250rpx;
			height: 250rpx;
			background-color: #fff;
			border: 1px solid #e4e4e4;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
			padding: 1.5rem;
			border-radius: .4rem;
			word-wrap: break-word;
			box-sizing: border-box;
			padding: 15rpx;

			.block-card-title {
				font-weight: bold;
				font-size: 36rpx;
				color: #4a6680;
			}

			.block-card-text {
				font-size: 22rpx;
				color: rgba(69, 90, 100, 0.6);
			}
		}

		.block-image {
			width: 220rpx;
			height: 120rpx;
			background-color: #4a6680;
		}
	}
</style>